<template>
    <!-- 引入header组件 -->
    <Header />
    <main>
        <router-view></router-view>
    </main>
    <Footer />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'


</script>

<style lang="scss" scoped>
.menu-body {
    border-bottom: 1px solid #edeff1;
    width: 100%;

    .menu-contaienr {
        display: flex;
        margin: 0 auto;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        width: 1200px;

        .index-logo {
            font-size: 26px;
            font-weight: 700;
            color: #0052ff;
        }

        .menus {
            height: 60px;
            display: flex;
            width: 700px;
            justify-content: space-around;

            .meun-item {
                cursor: pointer;
                line-height: 60px;
                font-weight: 500;

                &:hover {
                    color: #0052ff;

                    border-bottom: 3px solid #0052ff;
                }
            }
        }
    }
}

.sub-menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 3px 3px 5px #f3f3f3;

    .subMenu-container {
        width: 600px;
        margin: 0 auto;
        padding: 30px 0;

        .subMenu-item {
            font-weight: 500;
            line-height: 50px;
            display: flex;
            align-items: center;
        }
    }
}</style>